<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form >
        <div>
            <input type="text" name="username" placeholder="用户">
        </div>
        <div>
            <input type="password" name="password" placeholder="密码">
        </div>
        <div>
            <select name="server" >
                <option value="52">微信IOS 52 青铜</option>
                <option value="53">微信IOS 53 白银</option>
                <option value="54">微信IOS 54 黄金</option>
            </select>
        </div>
        <div>
            <button type="button">登录</button>
        </div>
    </form>
    
</body>
<script>
    let uname = document.querySelector("input[name='username']");
    let passwd = document.querySelector("input[name='password']");
    let serv = document.querySelector("select[name='server']");
    
    //uname.focus();
    //passwd.focus();
    uname .addEventListener('focus',e =>{
        console.log('用户名输入框获得焦点');
    });
    uname .addEventListener('blur',e =>{
        console.log('用户名输入框失去焦点');
    });
    serv.addEventListener('change',e =>{
        console.log('用户换服',serv.value);     
   });
   passwd.addEventListener('keyup',e =>{
       console.log('按键弹起');
       if(e.keyCode == 13){
           console.log("用户按下回车键");
           
       }
   });
   passwd.addEventListener('keydown',e =>{
       console.log('按键down');  
   });
   passwd.addEventListener('keypress',e =>{
       console.log('按键press');  
   });
    
</script>
</html>